import 'package:flutter/material.dart';
import 'package:netease_music/models/banner_item.dart';
import 'package:netease_music/widget/my_cached_network_image.dart';

class BannerCarousel extends StatefulWidget {
  final List<BannerItem> bannerList;

  const BannerCarousel({super.key, required this.bannerList});

  @override
  State<BannerCarousel> createState() => _BannerCarouselState();
}

class _BannerCarouselState extends State<BannerCarousel> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 375 / 150, // 你可以根据设计稿调整比例
      child: Stack(
        children: [
          // 图片轮播
          PageView.builder(
            itemCount: widget.bannerList.length,
            onPageChanged: (index) {
              setState(() => _currentIndex = index);
            },
            itemBuilder: (context, index) {
              final item = widget.bannerList[index];
              return Stack(
                fit: StackFit.expand,
                children: [
                  // 图片（无圆角）
                  MyCachedNetworkImage(
                    imageUrl: item.pic,
                    x: 500,
                    y: 500,
                  ),
                  // 右下角文字
                  Positioned(
                    bottom: 8,
                    right: 8,
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                        vertical: 2,
                        horizontal: 8,
                      ),
                      decoration: BoxDecoration(
                        color: item.titleColor,
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: Text(
                        item.typeTitle,
                        style: const TextStyle(
                          fontSize: 12,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ],
              );
            },
          ),
          // 底部圆点指示器（悬浮）
          Positioned(
            bottom: 12,
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(widget.bannerList.length, (index) {
                final isActive = index == _currentIndex;
                return Container(
                  margin: const EdgeInsets.symmetric(horizontal: 4),
                  width: 12,
                  height: 12,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: isActive
                        ? Theme.of(context).primaryColor
                        : Colors.white,
                    border: Border.all(color: Colors.grey.shade300),
                  ),
                );
              }),
            ),
          ),
        ],
      ),
    );
  }
}
